<template>
  <div>

    <router-view></router-view>
    <!-- 这是搜索框 -->
    <!-- <div>
      <van-search shape="round" v-model="value" placeholder="123" />
  </div> -->
    <!--底部导航-->
    <div>
      <van-tabbar v-model="active">
        <van-tabbar-item :to="item.to" v-for="(item, index) in list">
          <span>{{ item.title }}</span>
          <template #icon="props">
            <img :src="props.active ? item.icon.active : item.icon.inactive" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
export default {
  //存放页面数据
  data() {
    return {
      active: 0,
      //底部导航的数据
      list: [
        {
          title: "首页",
          icon: {
            active: require('../assets/123.jpg'),
            inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
          },
          to: { name: "Home" }
        },
        {
          title: "Mv",
          icon: {
            active: 'https://img01.yzcdn.cn/vant/user-active.png',
            inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
          },
          to: { name: "Mv" }
        },
        {
          title: "个人",
          icon: {
            active: 'https://img01.yzcdn.cn/vant/user-active.png',
            inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
          },
          to: { name: "Mine" }
        }
      ],

    };
  },
}
</script>
  
  
  
  
<style lang="less" scoped>
/deep/.van-search__content {
  background-image: linear-gradient(45deg, #eadfdf 59%, #ece2df 100%)
}
</style>
  
  